KDT0_YebinSeo 직원 관리서비스 #64
Conversation
|
업로드 기능 구현 잘 되는 것 같아요! 나중에 수정 삭제 기능이랑 css 만 더 다듬어주시면 좋을 것 같아요! 상세 페이지도 만들면 좋을 것 같습니다 ㅎㅎ 과제하시느라 수고하셨습니다!! |
|
업로드랑 수정기능 테스트 해봤는데 잘 동작합니다 . |
|
과제하느라 고생 많으셨습니다!
|
|
업로드랑 수정 기능 모두 정상적으로 작동하네요 🍀🍀 |
| const firebaseConfig = { | ||
| apiKey: "AIzaSyBLJjgAJr-CPkOMvQ5cXo_7XxRB457ClOY", | ||
| authDomain: "kakaojs-7b84e.firebaseapp.com", | ||
| projectId: "kakaojs-7b84e", | ||
| storageBucket: "kakaojs-7b84e.appspot.com", | ||
| messagingSenderId: "225584743925", | ||
| appId: "1:225584743925:web:7800682de75fbae054ccbc", | ||
| measurementId: "G-NCXB18TBVK" | ||
| }; |
There was a problem hiding this comment.
요런 config 설정같은경우는 script 함수 밖에 선언해주시는걸 추천드립니다
함수 안에 있으면 함수가 호출될때마다 config가 설정이 되어서 비효율적입니다~
| var template = ` <p>밑에 뜨는 프로필을 수정해주세요! 새로운 이미지를 클릭하고 몇초 뒤에 창이 뜨니 클릭은 꼭! 한번만 해주세요.</p> | ||
| <div class="product"> | ||
| <button type="button" onclick="script('${doc.id}');"> | ||
| <img class="image" src="${doc.data().image}" alt="프로필 사진"/> | ||
| <div class="flex-grow-1 p-4"> | ||
| <h5 class="name">${doc.data().name}</h5> | ||
| <p class="email">${doc.data().email}</p> | ||
| <p class="phonenumber">${doc.data().phonenumber}</p> | ||
| <input class="form-control mt-2" type="file" id="image"> | ||
| <button class="btn btn-danger mt-3" id="update"><span>사진 업데이트</span></button> | ||
| </div> | ||
| </button> | ||
| </div>`; | ||
| /*for (var i = 0; i < $('.container').length; i++){ | ||
| console.log("inside for loop"); | ||
| $('.container').remove($('.container')[i]); | ||
| }*/ | ||
| $('.container').append(template); |
There was a problem hiding this comment.
append 돔 이벤트가 forEach 루프에서 계속 반복적으로 호출될꺼같습니다
데이터가 많아진다면 돔 이벤트도 많아져서 성능에 문제가 발생할수도있습니다
이러한 부분은 template += `` 문법을 사용해서 데이터를 전부다 만들고 반복문 종료후 append 한번으로 처리하는것을 추천드립니다~
| res.forEach((doc) => { | ||
| console.log(doc.data()); | ||
|
|
||
| var template = ` |
There was a problem hiding this comment.
var 변수는 es6 이후로는 사용하지 않습니다 let 혹은 const 사용하시는걸 추천드립니다!
| <script defer src="/__/firebase/8.6.5/firebase-storage.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> | ||
| <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> | ||
| <script type="module"> |
There was a problem hiding this comment.
지금 html 파일 내에 스크립트가 같이 있는거 같습니다
추후에는 파일을 분리 하여 관리하는것을 추천드립니다~
| /*$('#send').click(function(){ | ||
|
|
||
| var file = document.querySelector('#image').files[0]; | ||
| var storageRef = storage.ref(); | ||
| var route = storageRef.child('image/'+ file.name); | ||
| var uploadFile = route.put(file); | ||
|
|
There was a problem hiding this comment.
이러한 사용하지 않는 주석으로 된 코드는 삭제하시는것을 추천드립니다~
깃을 사용하고있어서 히스토리 관리가 되기때문에 코드 전체를 주석으로 남기지 않아도됩니다~
| const firebaseConfig = { | ||
| apiKey: "AIzaSyBLJjgAJr-CPkOMvQ5cXo_7XxRB457ClOY", | ||
| authDomain: "kakaojs-7b84e.firebaseapp.com", | ||
| projectId: "kakaojs-7b84e", | ||
| storageBucket: "kakaojs-7b84e.appspot.com", | ||
| messagingSenderId: "225584743925", | ||
| appId: "1:225584743925:web:7800682de75fbae054ccbc", | ||
| measurementId: "G-NCXB18TBVK" | ||
| }; |
There was a problem hiding this comment.
이러한 firebaseconfig가 html 파일마다 있는거 같습니다 이러한 부분을 별도의 파일로 분리하여 스크립트를 import하는 방식으로 하시면 좋습니다~
| $('#update').click(function(){ | ||
|
|
||
| var file = document.querySelector('#image').files[0]; | ||
| var storageRef = storage.ref(); | ||
| var route = storageRef.child('image/'+ file.name); | ||
| var uploadFile = route.put(file); | ||
|
|
There was a problem hiding this comment.
update click 이벤트가 forEach 문 안에있는거 같습니다
이러면 동일한 이벤트가 forEach 문이 돌때 마다 중첩으로 이벤트가 등록이 되서 성능상 문제가 발생할수있습니다~
| var template = ` | ||
|
|
||
| <div class="product"> | ||
| <button type="button" onclick="script('${doc.id}');"> |
There was a problem hiding this comment.
동적으로 추가되는 html에 onclick 이벤트를 넣기 보다는 innerHtml 로 html이 추가가 되고 해당 button 에 클래스를 이용해서 이벤트 리스너를 통한 클릭 이벤트를 잡아주시는게 좋습니다~
📷 직원 사진 관리 서비스
직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보았습니다!
[과제 기간]
2023.8.9~ 2023.8.18
[과제 수행 및 제출 방법]
[유저 플로우 다이어그램]
[웹사이트 링크 및 사용방법]
링크: https://kakaojs-7b84e.web.app/index.html
파이어베이스를 사용하여 스크롤이 가능한 형태의 직원 정보 조회 및 수정 페이지를 만들었습니다. 첫 페이지가 프로필 페이지고 각 직원 정보가 버튼 형태로 나오기 때문에 클릭하고 몇 초가 지나면 맨 밑에 그 직원의 사진을 대체 할수 있는 팝업과 버튼이 뜹니다. 직원을 추가하고 싶으면 NavBar에 있는 "Add More Employees"를 누르면 직원 추가 페이지로 넘어갑니다. 직원 추가를 마치면 자동으로 프로필 페이지로 돌아옵니다. 데스크탑-모바일 반응형 페이지며, 사진 업데이트 버튼은 마우스가 올라가면 그라데이션으로 색이 바뀌고 그림자가 생기는 애니메이션을 추가 하였습니다. CSS에서도 child가 있는 요소는 child에 rem을 적용하였습니다. 또한 script.js 파일 안에서 DOM event를 사용하여 파이어베이스 데이터베이스에서 직원 정보를 불러내 리스팅 했습니다.
[사용한 기술 스택]
JS, HTML, CSS, 파이어베이스
[후기 및 아쉬운 점]
(이번에도) 깃이 제대로 꼬여서 제출하느라 애먹었습니다. 파이어베이스를 처음 써봐서 그런지 연동하는 작업이 꽤 오래 걸렸는데 굉장히 좋은 경험이었습니다! 다만 기능을 위주로 개발하다 보니 디자인에 신경을 못 썼고 처음 구상했던 카카오 프렌즈 정보 및 사진 관리 페이지로 발전시키지 못해 아쉽습니다(그래서 폴더 이름에 "카카오"가 들어간 것입니다).